<template>
  <el-dialog
    title="轨迹图"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%"
  >
    <div ref="interceptBox">
      <baidu-map
        ref="baiduMap"
        class="map"
        :center="center"
        :zoom="16"
        :scroll-wheel-zoom="true"
        @ready="handler"
      >
        <bm-polyline
          :path="lineList"
          strokeColor="blue"
          :strokeOpacity="0.7"
          :strokeWeight="3"
        >
        </bm-polyline>
        <bm-circle
          v-for="(item,index) in circleList"
          :key="index"
          :center="item.center"
          :radius="item.radius"
          stroke-color="red"
          :stroke-opacity="0.5"
          :stroke-weight="2"
          :editing="false"
        ></bm-circle>
      </baidu-map>
    </div>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="intercept">截 图</el-button> -->
      <el-button @click="visible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  components: {},
  data() {
    return {
      visible: false,
      center: { lng: 0, lat: 0 },
      lineList: [],
      canvasImg: null,
      id: null,
      circleList:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    console.log('轨迹图')
  },
  methods: {
    init(id) {
      this.circleList = []
      this.lineList = []
      this.id = id;
      this.visible = true;
      let params = {
        ledgerId: id
      };
      this.$http({
        url: this.$http.adornUrl(`/sys/gps/trajectory/list`),
        method: "post",
        params: this.$http.adornParams(params)
      }).then(({ data }) => {
        // this.initTrack(data);
        this.center.lng = data.lng;
        this.center.lat = data.lat
        data.reality.forEach(item => {
          this.lineList.push({
            lng: item.lon,
            lat: item.lat
          });
        });
        data.plan.forEach(item => {
          this.circleList.push({
            center:{
              lng:item.lng,
              lat:item.lat
            },
            radius:item.radius
          })
        })
      });
    },
    handler({ Bmap, map }) {
      console.log(Bmap, map);
      this.center.lng = 104.07;
      this.center.lat = 30.54;
    },
    initTrack(pointArray) {
      this.$nextTick(() => {
        const map = this.$refs.baiduMap.getMap();
        const polylinePoints = pointArray.map(point => {
          return new BMap.Point(point.lon, point.lat);
        });
        const polyline = new BMap.Polyline(polylinePoints, {
          strokeColor: "blue",
          strokeWeight: 3,
          strokeOpacity: 0.5
        });
        map.addOverlay(polyline);
      });
    },

    // 截屏
    intercept() {
      const interceptDom = this.$refs.interceptBox;
      const opts = {
        useCORS: true
      };
      html2canvas(interceptDom, opts).then(canvas => {
        const imgSrc = canvas.toDataURL("image/png");
        this.canvasImg = imgSrc;
      });
      setTimeout(() => {
        this.uploadImg();
        this.downloadImg("车辆轨迹图");
      }, 500);
    },

    //下载图片
    downloadImg(name) {
      const a = document.createElement("a"); // 生成一个a元素
      const event = new MouseEvent("click"); //创建一个单击事件
      a.download = name || "photo"; // 设置图片名称
      a.href = this.canvasImg;
      a.dispatchEvent(event); //触发a的点击事件
    },
    //上传图片
    uploadImg() {
      const params = {
        file: this.canvasImg.split(",")[1],
        id: this.id
      };
      console.log(params);
      this.$http({
        url: this.$http.adornUrl("/sys/oss/upload/minio"),
        method: "post",
        data: this.$http.adornData(params, false)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "上传成功",
            type: "success",
            duration: 1500
          });

          //更新databse
          this.$http({
            url: this.$http.adornUrl(`/generator/bcarledger/update`),
            method: "put",
            data: this.$http.adornData({
              id: this.id,
              trajectory: data.url
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 800px;
}
</style>
